<div class="page-content">
<div class="page-content-a">

<style type="text/css">
    /*=== Import Raleway fonts ===*/

    body, html {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background: #e0e7e6;
    }

    .discount-label {
        height: 39px;
        padding: 11px;
        position: relative;
        float: left;
        margin-top: 4px;
        margin-left: 255px;
        width: 100px;
        -webkit-border-radius: 0 4px 0 4px;
        -moz-border-radius: 0 4px 0 4px;
        border-radius: 0 4px 4px 0;
        position: absolute;

    }

    .discount-label:after {

        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        border-color: rgba(136, 183, 213, 0);

        border-width: 20px;
        top: 48%;
        margin-top: -20px;
    }

    .discount-label:before {
        content: '';
        z-index: 2;
        position: absolute;
        top: 42%;
        right: 100%;
        width: 7px;
        height: 7px;
        opacity: .95;
        background: #ffffff;
        border-radius: 7px;
        -webkit-box-shadow: inset .5px 0 rgba(0, 0, 0, 0.6);
        box-shadow: inset .5px 0 rgba(0, 0, 0, 0.6);

    }

    .discount-label span {
        color: #ffffff;
        font-size: 15px;
        text-align: center;
        margin-top: 3px;
        font-weight: bold;

    }

    .blue {
        background-color: #1883DB;
    }

    .blue:after {
        border-right-color: #1883DB;
    }


</style>

<div class="page-content-b">

    <!-- conteiner1 -->
    <div class="table-s">

        <div class="post-image post-gallery">
            <div class="flexslider">
                <ul class="slides">
                    <?php
                    foreach ($images as $image) {
                        echo ' <li><img src="' . $image->url . '" alt="" style="width:100%"/></li>';
                    }
                    ?>

                </ul>
            </div>
        </div>


        <!-- \\\center col\\\ -->
        <div class="table-s-left">
            <div class="table-s-left-b">
                <div class="padding">
                    <div class="page-two-cols-l">

                        <div class="post-col">


                            <div class="table-date">


                                <div class="table-date-right">
                                    <div class="table-date-right-b">
                                        <div class="padding">
                                            <div class="table-date-left">
                                                <div class="padding">
                                                    <div class="date-col">
                                                        <div class="post-date">
                                                            <div class="post-date-a"></div>
                                                            <div class="post-date-b"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <br class="clear none"/>
                                            </div>

                                            <div class="post-content">

                                                <div class="post-lbl"
                                                     style="padding-top: 7px;"><?php echo $product->name ?></div>
                                                <div class="clear"></div>
                                                <?php
                                                if ($uid == $product->uid) {
                                                    ?>
                                                    <div id="container" style="width:80%; height:400px;"></div>
                                                <?php
                                                }
                                                ?>
                                                <div class="post-info-line"
                                                     style="margin-top: -15px; margin-left: 40px;">
                                                    <a href="/?uid=<?php echo $product->uid ?>">By <?php echo $product->user_name ?></a>
                                                    On <span id="postedDate"></span> In <a
                                                        href="/?cat=<?php echo $product->cid ?>"><?php echo $product->category_name ?></a>
                                                </div>
                                                <?php echo $product->content ?>
                                                <div class="post-share-line">
                                                    <div class="post-share-a">

                                                    </div>

                                                </div>
                                                <div class="clear"></div>
                                            </div>

                                            <!-- // post comments // -->
                                            <div class="comments-block-lbl">Comments</div>
                                            <div class="fb-comments"
                                                 data-href="http://localhost/item/<?php echo $product->id ?>"
                                                 data-width="500" data-numposts="5" data-colorscheme="light"></div>


                                        </div>
                                    </div>
                                </div>
                                <br class="clear"/>
                            </div>
                        </div>


                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <br class="clear"/>
    </div>
    <!-- ///center col/// -->

</div>
<!-- /conteiner1 -->
<!-- \\\right col\\\ -->
<div class="table-s-right">
    <div class="padding">
        <div class="page-two-cols-r" style="margin-top: 545px">
            <?php
            if (isset($sale))
                echo '<div class="discount-label blue"> <span>SALE $' . $sale . '</span> </div>';
            ?>
            <div style="margin-bottom: 30px;">
                <a <?PHP if ($purchased == 2) echo 'href="/item/download/' . $product->id . '"' ?> onclick="<?PHP if ($purchased != 2) echo 'addCart()'?>"
                                                                                                   style="width: 100%; font-size: 15px; text-align: center"
                                                                                                   class="btn-large"
                                                                                                   id="addBtn">ADD TO
                    CART - $<?php echo $product->price ?></a>
            </div>
            <!-- // side search // -->

            <!-- \\ side menu \\ -->
            <!-- // resent posts // -->
            <div class="side-menu-lbl">FAMILIAR</div>
            <div class="resent-posts">
                <?php
                $count = 1;
                for ($i = 0; $i < count($sameCats) && $count < 9; $i++) {
                    if ($images_sc[$i] != null) {
                        echo '<a style="margin-bottom: 5px;" class="resent-posts-i ' . ($count % 4 == 0 ? 'nth' : '') . '" href="/item/' . $sameCats[$i]->id . '"><img style="width:100%; height: 100%" src="' . $images_sc[$i]->url . '" alt=""/>
                    <span></span></a>';
                        $count++;
                    }

                }
                ?>
                <div class="clear"></div>
            </div>

            <?php if (count($sameAuthors) > 1) {
                ?>
                <div class="side-menu-lbl">SAME AUTHOR</div>
                <div class="resent-posts">
                    <?php
                    $count = 1;
                    for ($i = 0; $i < count($sameAuthors) && $count < 9; $i++) {
                        if ($images_s[$i] != null) {
                            echo '<a  style="margin-bottom: 5px;" class="resent-posts-i ' . ($count % 4 == 0 ? 'nth' : '') . '" href="/item/' . $sameAuthors[$i]->id . '"><img style="width:100%; height: 100%" src="' . $images_s[$i]->url . '" alt=""/>
                    <span></span></a>';
                            $count++;
                        }
                    }
                    ?>



                    <div class="clear"></div>
                </div>
            <?php
            }?>


            <!-- \\ resent posts \\ -->
            <!-- // tags // -->
            <div class="side-menu-lbl">Tags</div>
            <div class="tags">
                <?php
                foreach ($tags as $tag) {
                    echo '<a href=/?tag=' . $tag->id . ' class="tags-i">' . $tag->name . '</a>';
                }

                ?>

                <div class="clear"></div>
            </div>
            <!-- \\ tags \\ -->
            <!-- // side menu // -->

            <!-- \\ side menu \\ -->
        </div>
    </div>
    <br class="clear none"/>

    <div>
        <style type="text/css">
            .navi {
                position: fixed;
                opacity: 0.9;
                bottom: 0px;
                width: 100%;
                height: 65px;
                z-index: 99;
                padding-top: 20px;
                padding-left: 20px;
                left: 300px;
                background: #ffffff;
            }

            .navi:hover {
                opacity: 1;
            }

            input {
                width: 170px;
                height: 32px;
                padding-left: 10px;
                padding-right: 10px;
                font-size: 13px;
                font-family: 'Open Sans';
                border: 1px solid #e3e3e3;
                background: transparent;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                margin-right: 15px;
                margin-left: 10px;
            }
        </style>
        <?php
        if ($uid == $product->uid) {
            ?>
            <div class="navi">
                    <span id="navi_1">
                        <a href="/edit/<?php echo $product->id ?>" class="btn-small">Edit</a>

                        <?php
                        if ($promo){
                        ?>
                        <a class="btn-small" id="btn_edit_promotion">Edit Promotion</a>
                            <a class="btn-small" id="btn_delete_promotion">Delete Promotion</a>

                    </span>

                            <span id="create_promotion" hidden="hidden" style="margin-left: 50px;">
                                Start Date <input type="date" placeholder="Start Date" id="promo_start"
                                                  data-date="<?php echo $promo->start ?>">
                                End Date <input type="date" placeholder="End Date" id="promo_end"
                                                data-date="<?php echo $promo->end ?>">
                                Discount <input type="number" id="promo_discount" placeholder="In percent"
                                                value="<?php echo $promo->discount ?>">
                                <a class="btn-small" id="btn_save">Save</a>
                                <a class="btn-small" id="btn_canel">Cancel</a>
                        </span>

                            <span style="float: right; right: 0px; position: fixed; margin-right: 20px;">
                                <a style="background: #2f3341"
                                   class="btn-small"><?php echo "Discounting $promo->discount% from <span id='start_date'>$promo->start</span> to <span id='end_date'>$promo->end</span>" ?></a>
                            </span>

                <?php
                }
                else {
                    ?>

                    <a class="btn-small" id="btn_create_promotion">Create Promotion</a>
                    </span>
                    <span id="create_promotion" hidden="hidden" style="margin-left: 50px;">
                            Start Date <input id="promo_start" type="date" placeholder="Start Date">
                        End Date <input id="promo_end" type="date" placeholder="End Date">
                        Discount <input id="promo_discount" type="number" placeholder="In percent">

                    <a hidden class="btn-small" id="btn_save">Save</a>
                    <a class="btn-small" id="btn_canel">Cancel</a>
                        </span>
                <?php
                }
                ?>


            </div>
        <?php
        }
        ?>

    </div>
</div>
<!-- ///right col/// -->
<div class="clear"></div>
</div>

</div>
</div>

<script>

    var dateToString = function (date, delimiter) {
        if (!delimiter) delimiter = '-';
        var addZ = function (x) {
            if (x < 10) return '0' + x;
        };
        return date.getFullYear() + delimiter + addZ(date.getMonth() + 1) + delimiter + addZ(date.getDate());
    };

    $(document).ready(function () {
        var date = new Date(<?php echo $product->posted_time*1000?>).toString().split(' ');
        $('#postedDate').text(date[1] + ', ' + date[2] + ' ' + date[3]);
        $('.post-date-a').text(date[2]);
        $('.post-date-b').text(date[1]);

        var promoStart = new Date(parseInt($('#promo_start').attr('data-date')) * 1000);
        $('#promo_start').val(dateToString(promoStart));

        var promoEnd = new Date(parseInt($('#promo_end').attr('data-date')) * 1000);
        $('#promo_end').val(dateToString(promoEnd));

        $('#start_date').text(dateToString(new Date(parseInt($('#start_date').text()) * 1000), '/'));
        $('#end_date').text(dateToString(new Date(parseInt($('#end_date').text()) * 1000), '/'));


    })

    $('#btn_create_promotion').click(function () {
        $('#navi_1').fadeOut();
        $('#create_promotion').fadeIn();
    })

    $('#btn_edit_promotion').click(function () {
        $('#navi_1').fadeOut();
        $('#create_promotion').fadeIn();
    })

    $('#btn_delete_promotion').click(function () {
        if (confirm('Delete promotion for this item?')) {
            $.post('/item/delete_promotion', {
                pid: <?php echo $product->id?>
            }).done(function (data) {
                if (parseInt(data) == 1) {
                    location.reload();
                }
            })
        }
    })

    $('#btn_canel').click(function () {
        $('#navi_1').fadeIn();
        $('#create_promotion').fadeOut();
    })

    $('#btn_save').click(function () {
        var pid = <?php echo $product->id?>;
        var start = (new Date($('#promo_start').val()).getTime() / 1000).toString().split('.')[0];
        var end = (new Date($('#promo_end').val()).getTime() / 1000).toString().split('.')[0];
        var discount = $('#promo_discount').val();

        if (start >= end) {
            alert('End date has to be greater than Start date');
            return;
        }
        if (discount <= 0 || discount >= 100) {
            alert('Discount has to be between 0 and 100');
            return;
        }

        $.post('/item/create_promotion', {
            pid: pid,
            start: start,
            end: end,
            discount: discount
        }).done(function (data) {
            if (parseInt(data) == 1) {
                location.reload();
            }
        })

    })

</script>
<div id="fb-root"></div>
<script>(function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=729661227122410&version=v2.0";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    var changeText = function (text) {
        $('#addBtn').text(text);
        $('#addBtn').css('background', '#2f3341');
        $('#addBtn').css('cursor', 'pointer');
        $('#addBtn').css('border-bottom', '2px solid #1c1f2a');
    };

    <?php
        if ($purchased==2) echo "changeText('DOWNLOAD');";
        if ($purchased==1) {
            echo "changeText('REMOVE FROM CART');";
            echo "$('#addBtn').attr('onclick','removeCart()')";
        }
    ?>

    var addCart = function () {
        <?php
            if (!$is_logged_in)  {
            ?>
        login();
        <?php
            } else {
            ?>

        var pid = <?php echo $product->id ?>;


        $.post('/item/add', {pid: pid}).done(function (data) {
            if (data == 1) {
                changeText('REMOVE FROM CART');
                $('#addBtn').attr('onclick', 'removeCart()')
            }
        });
        <?php
            }
         ?>
    }

    var removeCart = function () {
        var pid = <?php echo $product->id ?>;
        $.post('/purchase/remove_item', {pid: pid}).done(function (data) {
            if (data == 1) {
                changeText('ADD TO CART');
                $('#addBtn').css('background', '');
                $('#addBtn').css('cursor', '');
                $('#addBtn').css('border-bottom', '');
                $('#addBtn').attr('onclick', 'addCart()');

            }
        });
    }
</script>
<script>
    var chart1;
    var year = new Date().getFullYear();
    $(function () {
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            title: {
                text: 'Insights in ' + year
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Number of downloads'
                }
            },
            series: [
                {
                    name: 'Number of downloads',
                    data: [<?php echo $downloads; ?>]
                }
            ]
        });
    });
</script>